<script type="text/javascript" src="/ui/js/jquery-upload.js"></script>
<div class="fbzr-file">
	<input type="text" id="${id!}" name="${name!}" value="${value!}" style="width: 738px;cursor: pointer;" readonly><i class="ei" title="点击选择时间"></i><input type="file" id="${id!}_file" name="${name!}_file" accept="image/*" style="display:none">
</div>
<div class="fbzr-img">
	${isEmpty(value!) ? '' : '<a href="'+IMG + filedir + '/' + value+'" target="view_window">'	}<img src="${isEmpty(value!) ? '' : IMG + filedir + '/' + value	}" style="width: 178px; height: 178px;">${isEmpty(value!) ? '' : '</a>'}
</div>
<script>

var val='${value!''}';
$(function() {
	var $input = $('#${id!}');
	
	if(val.length>0){
		$('.fbzr-img').html('');
		$(val.split(',')).each(function(i,n){
			$('.fbzr-img').append('<div style="display: inline-block;"><img style="width: 20px;height: 20px;background-image: url(/ui/fbzr/css/fbzr_icon.png);background-repeat: no-repeat;position: absolute;background-color: white;cursor: pointer;" onclick="del(this)"/><a href="${IMG+filedir+'/'}'+n+'" target="view_window"><img src="${IMG+filedir+'/'}'+n+'" alt="'+n+'" style="width: 178px; height: 178px;"></a></div>');
		})
	}
	$input.on('click',function(){
		$("#${id!}_file").val('');
		$("#${id!}_file").click();
	});
	var htmlOptions = eval('({${options!}})');
	if (htmlOptions.disable) {
        // 灰色遮罩实现禁用
        $input.parent().mask();
    }
	
	// init input file
	$('.fbzr-file').each(function() {
		var offset = $(this).find('input[type=text]').offset();
		$(this).find('input[type=file]').css({
			left : offset.left-1,
			top : offset.top-1,
			width : $(this).width()
		});
	});
	
	// 异步传图(动态绑定事件)
	var myfun = function(){
		var $this_file = $("#${id!}_file");
		console.log($this_file.val());
		$input.val($this_file.val());
		var reader = new FileReader();
		var files = $this_file.prop('files');
		reader.readAsDataURL(files[0]);
		reader.onload = function(e) {
			if(val.length==0){
				$('.fbzr-img img').attr('src', e.target.result);
				var html = $('.fbzr-img img').prop('outerHTML');
				html='<div style="display: inline-block;"><img style="width: 20px;height: 20px;background-image: url(/ui/fbzr/css/fbzr_icon.png);background-repeat: no-repeat;position: absolute;background-color: white;cursor: pointer;" onclick="del(this)"/><a href="'+e.target.result+'" target="view_window">'+html+'</a></div>';
				$('.fbzr-img img').prop('outerHTML',html);
			}
			else{
				var html = $('.fbzr-img div:last').prop('outerHTML');
				html=html+html;
				$('.fbzr-img div:last').prop('outerHTML',html);
				$('.fbzr-img img:last').attr('src', e.target.result);
				$('.fbzr-img a:last').attr('href', e.target.result);
			}
		}
		
		$input.val("Loading...");
		
		$('#${id!}_file').upload({
			action: '/upload/img?name=${name!}_file&filedir=${filedir}',
			name: "${name!}_file",
			duplicate:true,
			onsuccess: function(json) {
				if(val.length==0){
					$input.val(json.fileName);
					val=json.fileName;
				}
				else{
					$input.val(val+','+json.fileName);
				}
				$('.fbzr-img img:last').attr('alt',json.fileName)
			}
		});
	};
	
	$(document).on("change","#${id!}_file", myfun);
});
function del(i){
	$(i).parent().remove();
	val='';
	$('.fbzr-img').children().each(function(ii,n){
		val = val+','+$(n).find('img:last').attr('alt');
	});
	val=val.substr(1,val.length-1);
	if(val.length==0){
		$('.fbzr-img').append('<img src="" style="width: 178px; height: 178px;">');
	}
	$('#${id!}').val(val);
}
</script>